<template>
  <t-list class="list-container">
    <todo-item
      :status="TASK_STATUS.WAITING"
      categoryName="待处理"
      :list="waittingList"
    ></todo-item>
    <todo-item
      :status="TASK_STATUS.PENDING"
      categoryName="进行中"
      :list="pendingList"
    ></todo-item>
    <todo-item
      :status="TASK_STATUS.FINISHED"
      categoryName="已完成"
      :list="finishedList"
    ></todo-item>
    <todo-item
      :status="TASK_STATUS.CANCELED"
      categoryName="已取消"
      :list="cancledList"
    ></todo-item>
    <todo-item
      :status="TASK_STATUS.DELETED"
      categoryName="已删除"
      :list="deleteList"
    ></todo-item>
  </t-list>
</template>

<script lang="ts" setup>
import { ITask, TASK_STATUS } from "@/models/task";
import { useTaskStore } from "@/store";
import { MessagePlugin } from "tdesign-vue-next";
import { computed } from "vue";

import todoItem from "./todo-item.vue";
// 任务store
const taskStore = useTaskStore();

// 任务列表
const list = computed(() => taskStore.list);
const waittingList = computed<ITask[]>(() =>
  taskStore.list.filter((ele) => ele.status === TASK_STATUS.WAITING)
);
const pendingList = computed<ITask[]>(() =>
  taskStore.list.filter((ele) => ele.status === TASK_STATUS.PENDING)
);
const cancledList = computed<ITask[]>(() =>
  taskStore.list.filter((ele) => ele.status === TASK_STATUS.CANCELED)
);
const finishedList = computed<ITask[]>(() =>
  taskStore.list.filter((ele) => ele.status === TASK_STATUS.FINISHED)
);
const deleteList = computed<ITask[]>(() =>
  taskStore.list.filter((ele) => ele.status === TASK_STATUS.DELETED)
);
</script>

<style lang="less" scoped>
.list-container {
  max-width: 600px;
  max-height: 600px;
  overflow: auto;
  margin: 0 auto;
  margin-top: 12px;
  background: var(--td-brand-color-4);
  padding: 12px;
  border-radius: 4px;
}
</style>